<script setup>
const info = reactive({
    username: '乔克***on'
})

const tableData = [
    {
        method: '2016-05-03',
        ip: 'Tom',
        time: 'No. 189, Grove St, Los Angeles',
        system:'Win10'
    },
    {
        method: '2016-05-03',
        ip: 'Tom',
        time: 'No. 189, Grove St, Los Angeles',
        system:'Win10'
    },
    {
        method: '2016-05-03',
        ip: 'Tom',
        time: 'No. 189, Grove St, Los Angeles',
        system:'Win10'
    },
    {
        method: '2016-05-03',
        ip: 'Tom',
        time: 'No. 189, Grove St, Los Angeles',
        system:'Win10'
    },
]
</script>

<template>
    <div class="pageWrapper">
        <h2 class="risk-title">登录记录</h2>
        <p class="risk-tip">{{ info.username }}，以下是您最近3个月的登录记录，若存在异常登录记录，请尽快修改密码</p>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="method" label="登录方式" width="180" />
            <el-table-column prop="ip" label="登录IP" width="180" />
            <el-table-column prop="time" label="登录时间" />
            <el-table-column prop="system" label="系统" />
        </el-table>
    </div>
</template>

<style scoped>
.pageWrapper {
    width: 95%;
    background-color: #fff;
    height: calc(100vh - 120px);
    margin: 0 auto;
    box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.05);
    padding: 50px;
}

.risk-tip {
    color: #8c939d;
    margin-top: 15px;
    margin-bottom:20px
}
</style>
